<template>
    
    <el-card class="!border-none " shadow="never">
        
        <el-form class="-mb-4" :model="queryFormData" label-width="98px" inline>
            <el-card class="!border-none mt-5" shadow="never">
                <div class="flex justify-between items-center">
                    <div>
                        <el-button type="primary" @click="handleCreateOrder()">
                            <template #icon>
                                <icon name="el-icon-Plus"/>
                            </template>
                            增加
                        </el-button>
                    </div>
                    <div>
                        <Upload
                            mapping="crm/data"
                            class="mr-3"
                            :data="{ id: props.id }"
                            type="excel"
                            :show-progress="true"
                            @change="refresh"
                        >
                            <el-button type="danger">本地上传</el-button>
                        </Upload>
                    </div>
                </div>
                
                <el-table
                    ref="tableRef"
                    size="large"
                    class="mt-2"
                    v-loading="pagerData.loading"
                    :data="pagerData.lists"
                    row-key="id"
                >
                    <el-table-column label="年份" prop="yearCode" min-width="90"/>
                    <el-table-column label="一月" prop="january" min-width="90"/>
                    <el-table-column label="二月" prop="february" min-width="90"/>
                    <el-table-column label="三月" prop="march" min-width="90"/>
                    <el-table-column label="四月" prop="april" min-width="90"/>
                    <el-table-column label="五月" prop="may" min-width="90"/>
                    <el-table-column label="六月" prop="june" min-width="90"/>
                    <el-table-column label="七月" prop="july" min-width="90"/>
                    <el-table-column label="八月" prop="august" min-width="90"/>
                    <el-table-column label="九月" prop="september" min-width="90"/>
                    <el-table-column label="十月" prop="october" min-width="90"/>
                    <el-table-column label="十一月" prop="november" min-width="90"/>
                    <el-table-column label="十二月" prop="december" min-width="90"/>
                    <el-table-column label="综合计算" prop="count" min-width="100"/>
                    
                    <el-table-column label="操作" width="170" fixed="right">
                        <template #default="{ row }">
                            <el-button
                                type="primary"
                                link
                                @click="handleEdit(row)"
                            >
                                编辑
                            </el-button>
                            
                            
                            <el-button
                                type="danger"
                                link
                                @click="handleDelete(row)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <pagination v-model="pagerData" @change="getPageLists"/>
            
            </el-card>
        
        </el-form>
    </el-card>
    
    <Create ref="dataCreateRef" @confirm="handleSubmit" @close="showDataCreateRef=false" v-if="showDataCreateRef"/>
    <Edit ref="dataEditRef" @confirm="handleSubmit" @close="showDataEditRef=false" v-if="showDataEditRef"/>


</template>

<script lang="ts" setup>
import {ref, onMounted, defineProps} from 'vue';
import Detail from "@/views/logistics/client/clientList/detail.vue";
import {useFormatterTimeManager} from "@/manager/base/FormatterManager";
import {UnwrapNestedRefs} from "@vue/reactivity";
import {usePagerManager} from "@/manager/base/PagerManager";
import {delLogisticsAdmin, getLogisticsAdminListByPage} from "@/api/logistics/CrmLogisticsAdminController";
import routerManager from "@/manager/base/RouterManager";
import router from "@/base/router";
import feedback from "@/utils/feedback";

import CrmLogisticsDataSearchRequest from "@/api/logistics/request/CrmLogisticsDataSearchRequest";
import {
    createLogisticsData,
    delLogisticsData,
    getLogisticsDataListByPage
} from "@/api/logistics/CrmLogisticsDataController";
import CrmLogisticsDataDTO from "@/api/logistics/dto/CrmLogisticsDataDTO";
import Create from "@/views/logistics/client/data/create.vue";
import Edit from "@/views/logistics/client/data/edit.vue";

// 接收父组件传来的id
const props = defineProps<{
    id: number | null;
}>();

const detailRef = shallowRef(Detail)
const showMore = ref(true)
const showDetailRef = ref(false)
const showDataCreateRef = ref(false)
const showDataEditRef = ref(false)

const dataCreateRef = shallowRef(Create)
const dataEditRef = shallowRef(Edit)


let {formatterCreateTime} = useFormatterTimeManager();

let queryFormData: UnwrapNestedRefs<CrmLogisticsDataSearchRequest> = reactive(new CrmLogisticsDataSearchRequest)

const {pagerData, getPageLists, resetParams, resetOnePage} = usePagerManager({
    fetchFun: getLogisticsDataListByPage,
    params: queryFormData
})

async function handleCreateOrder() {
    showDataCreateRef.value = true
    await nextTick()
    dataCreateRef.value?.open()
}


async function handleEdit(row: any) {
    showDataEditRef.value = true
    await nextTick()
    dataEditRef.value?.open(row.id)
}

async function handleDelete(row: any) {
    await feedback.confirm("确定删除这条记录吗？")
    await delLogisticsData({id: row.id})
    await getPageLists()
    
}

function refresh() {
    getPageLists()
}

function handleSubmit(val: CrmLogisticsDataDTO) {
    createLogisticsData(val).then(() => {
        showDataCreateRef.value = false
        showDataEditRef.value = false
        getPageLists()
    })
}


onMounted(async () => {
    if (props.id) {
        queryFormData.corporationId = props.id
    }
    getPageLists()
});

</script>